<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/base.css" />
    <link rel="stylesheet" href="css/home.css" />
    <link rel="stylesheet" href="css/discover.css" />
    <link rel="stylesheet" href="css/cate.css" />
    <title>发现</title>
</head>

<body>
    <div class="container">
        <!-- 头部页面标题 -->

        <header>
            <div class="head">
                <span class="icon">&#xe60e;</span> 分类选择
            </div>
        </header>

        <!-- 第一个标题 -->
        <section>
            <div class="title">
                <h3>热门分类</h3>
                <a href="#">更多>></a>
            </div>
        </section>

        <!-- 热门分类栏 -->
        <section>
            <div class="cate_hot">
                <ul>
                    <li>
                        <img src="images/cat_hot01.png" alt="" />
                        <h3>娱乐主播</h3>
                        <p>吃喝玩乐专享</p>
                    </li>
                    <li>
                        <img src="images/cat_hot02.png" alt="" />
                        <h3>音乐主播</h3>
                        <p>唱歌专辑精选</p>
                    </li>
                    <li>
                        <img src="images/cat_hot03.png" alt="" />
                        <h3>游戏专场</h3>
                        <p>主播叫你玩更嗨</p>
                    </li>
                    <li>
                        <img src="images/cat_hot04.png" alt="" />
                        <h3>才艺展示</h3>
                        <p>精彩才艺秀</p>
                    </li>
                </ul>
            </div>
        </section>

        <!-- 推荐标题 -->
        <section>
            <div class="title">
                <h3>其他分类</h3>
                <a href="#">更多>></a>
            </div>
        </section>

        <!-- 其他分类 -->
        <section>
            <div class="cate_hot">
                <ul>
                    <li>
                        <img src="images/cate_other01.png" alt="" />
                        <h3>梦幻二次元</h3>
                        <p>吃喝玩乐专享</p>
                    </li>
                    <li>
                        <img src="images/cate_other02.png" alt="" />
                        <h3>电商购物</h3>
                        <p>唱歌专辑精选</p>
                    </li>
                    <li>
                        <img src="images/cate_other03.png" alt="" />
                        <h3>题曰文娱</h3>
                        <p>吃喝玩乐专享</p>
                    </li>
                    <li>
                        <img src="images/cate_other04.png" alt="" />
                        <h3>教育科技</h3>
                        <p>唱歌专辑精选</p>
                    </li>
                </ul>
                <div class="clear"></div>
            </div>

        </section>


        <!-- 内容底部填充块 -->
        <section>
            <div class="filled"></div>
        </section>


        <!-- 主播工具 -->
        <section>
            <div class="toolscontainer" id="zhubotool">
                <div class="zhubotools">
                    <p>直播工具</p>
                    <ul class="tools_list">
                        <li>
                            <a href="#">
                                <img src="images/zhibo_tools_list01.jpg" alt="">
                                <p>在线直播</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/zhibo_tools_list02.jpg" alt="">
                                <p>美颜工具</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/zhibo_tools_list03.jpg" alt="">
                                <p>视频管理</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/zhibo_tools_list04.jpg" alt="">
                                <p>制作影片</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/zhibo_tools_list05.jpg" alt="">
                                <p>字体选择</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/zhibo_tools_list06.jpg" alt="">
                                <p>拍短视频</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/zhibo_tools_list07.jpg" alt="">
                                <p>发布动态</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/zhibo_tools_list08.jpg" alt="">
                                <p>直播公告</p>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>

        </section>


        <!-- 底部导航栏 -->

        <footer>
            <div class="nav">
                <ul>


                    <li>
                        <a href="home.html">
                            <img src="images/nav_01.png" alt="">
                            <img src="images/nav_active01.png" alt="">
                            <p>首页</p>
                        </a>
                    </li>



                    <li>
                        <a href="cate.html">
                            <img src="images/nav_02.png" alt="">
                            <img src="images/nav_active02.png" alt="">
                            <p>分类</p>
                        </a>
                    </li>


                    <li id="zhubo_tools3" class="zhubo_toolsbtn" onclick="dispZhuBoTools()">
                        <img src="images/nav_center.png" alt="">
                        <div class="mengban"></div>
                    </li>


                    <li>
                        <a href="discover.html">
                            <img src="images/nav_03.png" alt="">
                            <img src="images/nav_active03.png" alt="">
                            <p>发现</p>
                        </a>
                    </li>


                    <li>
                        <a href="my.html">
                            <img src="images/nav_04.png" alt="">
                            <img src="images/nav_active04.png" alt="">
                            <p>我的</p>
                        </a>
                    </li>

                </ul>
            </div>
        </footer>
    </div>

    <script src="js/commen.js"></script>
</body>

</html>